<template>
  <div class="h-full pb-60 m-relative w-full">
    <div class="py-20 h-full overflow-y-auto w-full px-30">
      <div class="ml-auto mr-auto pt-10 mb-20">
        <a-steps :current="stepCurrent">
          <a-step>创建打款</a-step>
          <a-step>选择人员</a-step>
          <a-step>审查确认</a-step>
        </a-steps>
      </div>
      <template v-if="stepCurrent == 1">
        <a-form
          ref="formRef"
          :model="form"
          size="medium"
          auto-label-width
          class="ml-auto mr-auto mt-20n"
          style="width: 700px"
        >
          <a-form-item
            field="payUser"
            label="打款平台："
            :rules="[{ required: true, message: '请选择打款平台' }]"
            :validate-trigger="['change', 'clear', 'remove', 'input-value-change']"
          >
            <a-select v-model="form.payUser" @change="payAccountChange" placeholder="请选择">
              <a-option v-for="item in platformList" :key="item.id" :value="item.id" :label="item.name"></a-option>
            </a-select>
          </a-form-item>
          <a-form-item
            field="payType"
            label="支付路径："
            :rules="[{ required: true, message: '请选择支付路径' }]"
            :validate-trigger="['change', 'clear', 'remove', 'input-value-change']"
          >
            <a-select v-model="form.payType" placeholder="请选择">
              <a-option :value="1" :disabled="form.payUser == 11" label="支付宝"></a-option>
              <a-option :value="2" label="银行卡"></a-option>
            </a-select>
          </a-form-item>
        </a-form>
      </template>
      <template v-else-if="stepCurrent == 2">
        <div class="ml-auto mr-auto mt-30">
          <a-alert type="warning"
            >打款平台：{{ formatObject(platformList, 'id', form.payUser, 'name') }}， 支付路径：{{
              form.payType == 1 ? '支付宝' : form.payType == 2 ? '银行卡' : '--'
            }}</a-alert
          >
          <a-button class="my-20" type="primary" size="small" @click="onAddUser">
            <template #icon><icon-plus /></template>
            <span>新增用户</span>
          </a-button>
          <a-table
            row-key="id"
            :columns="columns"
            :loading="loading"
            :data="tableData"
            :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
            :pagination="false"
          >
            <template #count="{ record }">
              <template v-if="form.payType == 1">
                <template v-if="record.alipayNo">
                  <div class="flex-col">
                    <span>支付宝</span>
                    <span>{{ record.alipayNo }}</span>
                  </div>
                </template>
              </template>
              <template v-else-if="form.payType == 2">
                <template v-if="record.bankCard">
                  <div class="flex-col">
                    <span>{{ record.bankName }} </span>
                    <span>{{ record.bankCard }}</span>
                  </div>
                </template>
              </template>
            </template>
            <template #money="{ record }">
              <a-input-number :min="1" v-model="record.amount"></a-input-number>
            </template>
            <template #action="{ rowIndex }">
              <a-button type="text" size="small" @click="delItem(rowIndex)">
                <template #icon>
                  <icon-delete />
                </template>
                删除
              </a-button>
            </template>
          </a-table>
        </div>
      </template>
      <template v-else-if="stepCurrent == 3">
        <div class="pt-20n">
          <a-alert type="warning" class="mx-auto" style="width: 400px">
            <div class="flex-col">
              <div class="font-bold">共 {{ tableData.length }} 个用户，{{ moneyCount }}元</div>
              <div class="font-bold">
                将通过 （打款平台）{{ formatObject(platformList, 'id', form.payUser, 'name') }} （打款途径）
                {{ form.payType == 1 ? '支付宝' : form.payType == 2 ? '银行卡' : '--' }} 打款！
              </div>
            </div>
          </a-alert>
        </div>
      </template>
    </div>
    <div class="m-absolute border-box b-0 l-0 r-0 h-60 flex flex-a-c bt-f0 px-20 flex-j-c">
      <a-space>
        <a-button :disabled="loading" @click="props.onClose(0)">取消</a-button>
        <a-button v-if="stepCurrent > 1" type="primary" :disabled="loading" @click="pre">上一步</a-button>
        <a-button v-if="stepCurrent < 3" type="primary" :disabled="loading" @click="next">下一步</a-button>
        <a-button v-else type="primary" :loading="loading" @click="onOk">确定</a-button>
      </a-space>
    </div>
  </div>
</template>

<script setup>
import { lgLogCreat } from '@/apis'
import { Message } from '@arco-design/web-vue'
import User from './User.vue'
import { useLayer } from '@/hooks'
import { formatObject } from '@/utils/common'
import { platformList } from './data'

const props = defineProps(['params', 'onClose'])

const formRef = ref()
const loading = ref(false)
const stepCurrent = ref(1)
const moneyCount = ref(0)
const form = reactive({
  payUser: undefined,
  payType: undefined
})
const tableData = ref([])

const columns = ref([
  {
    title: '姓名',
    dataIndex: 'name',
    width: 100
  },
  {
    title: '身份证号',
    dataIndex: 'idCard',
    width: 160
  },
  {
    title: '手机号',
    dataIndex: 'phone',
    width: 110
  },
  {
    title: '收款账号',
    slotName: 'count',
    width: 150
  },
  {
    title: '类型',
    dataIndex: 'type',
    width: 120
  },
  {
    title: '打款金额',
    slotName: 'money',
    width: 120
  },
  {
    title: '操作',
    width: 100,
    fixed: 'right',
    align: 'center',
    slotName: 'action'
  }
])

//回显表单值
onMounted(() => {})

const payAccountChange = (e) => {
  if (e === 11) {
    form.payType = 2
  }
}

// 上一步
const pre = () => {
  if (stepCurrent.value > 1) stepCurrent.value--
}

// 下一步
const next = () => {
  if (stepCurrent.value >= 3) return
  if (stepCurrent.value == 1 && !form.payUser) return Message.error('请选择打款平台')
  if (stepCurrent.value == 1 && !form.payType) return Message.error('请选择支付路径')
  if (stepCurrent.value == 2 && tableData.value.length == 0) return Message.error('请选择需要打款的人员')
  if (stepCurrent.value == 1) tableData.value = []
  stepCurrent.value++
}

// 获取选择的人员
const getUser = (list) => {
  const res = list.map((item) => {
    return {
      ...item,
      amount: 1
    }
  })
  tableData.value = res.concat(tableData.value)
}

// 人员弹窗
const onAddUser = () => {
  const keys = tableData.value.map((item) => item.id)
  useLayer().openLayer(
    User,
    {
      params: { payType: form.payType, keys },
      title: '选择打款人员',
      area: ['90%', '95%']
    },
    getUser
  )
}

// 删除已选
const delItem = (index) => {
  tableData.value.splice(index, 1)
}

// 点击确认添加/编辑
const onOk = async () => {
  try {
    loading.value = true
    const userLists = tableData.value.map((item) => {
      return {
        userId: item.id,
        amount: item.amount
      }
    })
    await lgLogCreat({ ...form, userLists })
    Message.success('创建成功')
    props.onClose()
  } finally {
    loading.value = false
  }
}

watch(
  () => tableData.value,
  (e) => {
    let num = 0
    tableData.value.forEach((item) => {
      num += Number(item?.amount ?? 0)
    })
    moneyCount.value = num
  },
  {
    deep: true,
    immediate: true
  }
)
</script>
<style lang="scss" scoped>
.r--100 {
  right: -110px;
}
</style>
